JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at using the object literal shorthand syntax, arrow functions for callbacks, and using const most of the time to prevent accidental reassignment.
Use Object Literal Shorthand Syntax
We should use object literal shorthand syntax for populating our object with properties.
There’re 2 kinds of shorthands that are available for populating object properties in objects.
One is the object property shorthand and the other is the method shorthand.
To use the object property shorthand, we can write something like the following code:
const a = 1,
b = 2,
c = 3;
const obj = {
a,
b,
c
};
In the code above, we have constants a , b and c .
Then we populate the obj object with properties a , b and c with the values that are the same as the variables with the same name.
The code above is equivalent to the following code:
const a = 1,
b = 2,
c = 3;
const obj = {
a: a,
b: b,
c: c
};
As we can see, we removed duplicate code with the shorthand. It saves us typing and looks cleaner.
For methods, we can declare them with the shorthand as follows. For example, we can add methods to our object with the following code:
const obj = {
foo() {},
bar() {}
};
In the code above, we declared the foo and bar methods in the obj object as traditional functions by using the shorthand, which lets us declare traditional functions as methods in our object without using the : and the function keyword.
We know that they’re traditional functions because we can reference this in it. For instance, we can write the following code to do that:
const obj = {
baz: 'baz',
foo() {
console.log(this.baz);
},
bar() {}
};
In the code above, we log the value of this.baz , where this is obj in the code above.
Then when we call it as follows:
obj.foo();
We get 'baz' logged in the console. Therefore, we know that this inside the foo method is the obj object, so we know that the foo method is a traditional JavaScript function.
This much shorter than its older equivalent, which is the following:
const obj = {
baz: 'baz',
foo: function() {
console.log(this.baz);
},
bar: function() {}
};
As we can see from the code above, we have to type out a lot more characters to declare a method in the code above, the function keyword is 8 extra characters and we have it in both methods.
We can also shorten the declaration of generator functions. The following is the shorthand for declaring a generator method in JavaScript objects:
const obj = {
* foo() {
yield 1;
},
};
The code above has the * symbol to indicate that foo is a generator function rather than a regular function.
It’s shorthand for the following code:
const obj = {
foo: function*() {
yield 1;
},
};
As we can see, it’s much shorter.
Therefore, we should use the shorthands to populate our object properties whenever possible so that we can type less and make our code cleaner while keeping our code clear still.
Using Arrow Functions for Callbacks
Using arrow functions for callbacks is a great idea. We don’t have to worry about the value of this inside an arrow function since it doesn’t mind it.
It’s also less verbose and it binds to the this in their surround scope rather than binding to their own value of this unlike a regular function.
If we don’t need to have a specific value for this in our callbacks, which is most likely the case, then we can use arrow functions for our callbacks.
For instance, instead of writing the following code:
const arr = [1, 2, 3].map(function(x) {
return x * 2;
})
we can write the following with an arrow function as the callback:
const arr = [1, 2, 3].map(x => x * 2);
As we can see, there’s a big difference in the number of characters in each piece of code. They do the same thing, but the first example is much longer than the 2nd.
We implicitly return x * 2 since we return our result in the first line. Also, we didn’t have to use the function and return keywords to define our function and return something inside.
Since it doesn’t reference a specific value of this , using an arrow function is the right choice.
Conclusion
Whenever we can, we should use the object shorthands to populate the properties of our objects. There’re shorthands for both value properties and methods.
Using arrow function for callbacks is a good choice because it saves lots of typing and doesn’t bind to its own value of this .
